<template>
  <div>
    <div class="wrapper">
      <!-- 轮播图 -->
      <div class="block">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in carousel" :key="item.id">
            <div>
              <img :src="item.url" alt="" />
              <div class="text">
                <div class="name">{{ item.name }}</div>
                <div class="introduce">{{ item.introduce }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 栏目内容区域 -->
      <div class="cleafix">
        <div class="wrapper">
          <!-- 左侧通知公告 -->
          <h1 class="left">
            <!-- 顶部标题区域 -->
            <div class="topBar">
              <div class="title">
                <span>通知</span>
                <span>公告</span>
              </div>
              <div class="line">
                <b class="lineOne"></b>
                <b class="lineTwo"></b>
              </div>
              <div
                class="more"
                @click="
                  goCategory(
                    notify && notify[0].category.id,
                    notify && notify[0].category.parentId
                  )
                "
              >
                <span href="##" class="more">更多</span>
                <font size="+0">&gt;&gt;</font>
              </div>
            </div>

            <!-- 文章标题区域 -->
            <div class="middle">
              <section v-for="(item, index) in notify" :key="index">
                <div class="date">
                  <h4 class="mouth">{{ item.publishMouth }}</h4>
                  <h3 class="day">{{ item.publishDay }}</h3>
                </div>
                <div class="right">
                  <div class="title" @click="goContext(item.id)">
                    {{ item.title }}
                  </div>
                  <div class="context" v-html="item.content"></div>
                </div>
              </section>
            </div>
          </h1>
          <!-- 中间新闻动态 -->
          <div class="center">
            <!-- 顶部 bar -->
            <div class="topBar">
              <h1 class="title">新闻动态</h1>
              <div
                class="more"
                @click="
                  goCategory(
                    notify && notify[0].category.id,
                    notify && notify[0].category.parentId
                  )
                "
              >
                <span>更多</span>
                <font size="+0">&gt;&gt;</font>
              </div>
            </div>
            <ul class="article">
              <li class="new">
                <div class="picture">
                  <img :src="firstNews.cover" alt="" />
                </div>
                <div class="right">
                  <div class="title" @click="goContext(firstNews.id)">
                    {{ firstNews.title }}
                  </div>
                  <div class="context" v-html="firstNews.content"></div>
                  <div class="date">{{ firstNews.publishTime }}</div>
                </div>
              </li>

              <li class="last" v-for="(item, index) in news" :key="index">
                <span class="title" @click="goContext(item.id)">{{
                  item.title
                }}</span>
                <span class="date">{{ item.publishTime }}</span>
              </li>
            </ul>

            <section class="lastSection"></section>
          </div>

          <!-- 右侧 tab -->
          <div class="right">
            <div class="tab">
              <div
                class="tabOne"
                @mousemove="tabShow = 1"
                :class="[{ tabShow: this.tabShow === 1 }, { tabOne: true }]"
              >
                <span
                  @click="
                    goCategory(
                      smartServer && smartServer[0].category.id,
                      smartServer && smartServer[0].category.parentId
                    )
                  "
                  >智慧校园服务</span
                >
                <ul v-show="tabShow === 1">
                  <li
                    v-for="(item, index) in smartServer"
                    :key="index"
                    @click="goContext(item.id)"
                  >
                    {{ item.title }}
                  </li>
                </ul>
              </div>
              <div
                class="tabTwo"
                @mousemove="tabShow = 2"
                :class="[{ tabShow: this.tabShow === 2 }, { tabTwo: true }]"
              >
                <span
                  @click="
                    goCategory(
                      teachServer && teachServer[0].category.id,
                      teachServer && teachServer[0].category.parentId
                    )
                  "
                  >教学服务</span>
                <ul v-show="tabShow === 2">
                  <li
                    v-for="(item, index) in teachServer"
                    :key="index"
                    @click="goContext(item.id)"
                  >
                    {{ item.title }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部资源服务 -->
      <div class="vsbContainer">
        <div class="left">
          <div class="border">
            <div>资源<br />服务</div>
          </div>
        </div>
        <div class="carousel" @mouseover="stop" @mouseout="go">
          <div class="prev" @click="prev"></div>
          <div class="next" @click="next"></div>
          <div class="hidden">
            <ul class="scorll" v-bind:style="classList">
              <div v-for="index in 2" :key="index">
                <li v-for="(item, index) in bottomCarousel" :key="index">
                  <a href="#">
                    <img :src="item.src" alt="" />
                  </a>
                </li>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request.js";
import { fmtMouth, fmtDay, fmtDate } from "@/filters/index.js";
export default {
  data() {
    return {
      // 轮播图
      carousel: [],

      // 底部走马灯数据
      bottomCarousel: [
        { src: require("@/assets/carousel/xiaoyuanwang.png") },
        { src: require("@/assets/carousel/oa.png") },
        { src: require("@/assets/carousel/jiaoxueziyuan.png") },
        { src: require("@/assets/carousel/xiazai.png") },
        { src: require("@/assets/carousel/yikatong.png") },
        { src: require("@/assets/carousel/youxiang.png") },
      ],

      // 底部轮播图样式
      classList: {
        transform: `translateX(0px)`,
        transition: "all .5s",
      },

      // 轮播序号
      index: 0,

      // 停止定时器
      stopInterval: null,

      // 重置定时器
      reStartInterval: null,

      // tab栏显示
      tabShow: 1,

      // 通知公告数据
      notify: null,

      // 第一条新闻动态数据
      firstNews: [],

      // 新闻动态数据
      news: null,

      // 智慧校园服务数据
      smartServer: null,

      // 教学服务数据
      teachServer: null,
    };
  },

  methods: {
    // 前往栏目页
    goCategory(id, parentId) {
      this.$router.push({
        path: "/category",
        query: {
          id,
          parentId,
        },
      });
    },

    // 前往文章页面
    goContext(id) {
      this.$router.push({
        path: "/page",
        query: {
          id,
        },
      });
    },

    // 请求轮播图数据 /index/carousel/findAll
    async findAllCarousel() {
      let rsp = await get("/index/carousel/findAll");
      this.carousel = rsp.data;
    },

    // 查询通知公告数据 /index/article/pageQuery
    async findAllNotify() {
      let rsp = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 8,
        categoryId: 12,
      });

      console.log(rsp);
      rsp.data.list.map(function (item) {
        item.publishMouth = fmtMouth(item.publishTime) + "月";
        item.publishDay = fmtDay(item.publishTime) + "日";
      });

      this.notify = rsp.data.list;
    },

    // 查询所有新闻动态 /index/article/pageQuery
    async findAllNews() {
      let rsp = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 6,
        categoryId: 11,
      });
      rsp.data.list.map(function (item) {
        item.publishTime = fmtDate(item.publishTime);
      });
      this.firstNews = rsp.data.list[0];
      this.news = rsp.data.list;
    },

    // 查询通知公告数据 /index/article/pageQuery
    async findAllSmartServer() {
      let rsp = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 8,
        categoryId: 13,
      });

      // console.log(rsp.data.list[0].category);
      this.smartServer = rsp.data.list;
    },

    // 查询通知公告数据 /index/article/pageQuery
    async findAllTeachServer() {
      let rsp = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 8,
        categoryId: 14,
      });

      this.teachServer = rsp.data.list;
    },

    // 轮播图启动
    go() {
      this.stopInterval = setInterval(() => {
        if (this.index < 4) {
          this.classList.transition = "all .5s";
          this.index++;
          this.classList.transform = `translateX(${-this.index * 180}px)`;
        } else {
          this.index = 0;
          this.classList.transition = "none";
          this.classList.transform = `translateX(${-this.index * 180}px)`;
        }
      }, 3000);
    },

    // 移动
    move() {
      this.classList.transition = "all .5s";
      this.classList.transform = `translateX(${-this.index * 180}px)`;
    },
    // 轮播停止
    stop() {
      clearInterval(this.stopInterval);
    },

    // 轮播图右
    next() {
      if (this.index > 0) {
        this.index--;
        this.move();
      } else {
        this.index = 6;
        this.classList.transition = "none";
        this.classList.transform = `translateX(${-this.index * 180}px)`;
      }
    },

    // 轮播图左
    prev() {
      if (this.index < 6) {
        this.index++;
        this.move();
      } else {
        this.index = 0;
        this.classList.transition = "none";
        this.classList.transform = `translateX(${-this.index * 180}px)`;
      }
    },
  },

  created() {
    this.findAllCarousel();
    this.findAllNotify();
    this.findAllNews();
    this.findAllSmartServer();
    this.findAllTeachServer();
  },
  mounted() {
    this.go();
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/main.scss";

// 轮播图
.block {
  .text {
    position: absolute;
    top: 200px;
    left: 60px;
    color: #fff;
  }
  .name {
    background: $--theme-primary;
    font-size: 24px;
    padding: 0 10px;
    height: 56px;
    line-height: 56px;
    display: inline-block;
  }
  .introduce {
    font-size: 16px;
    margin-top: 2px;
    width: 496px;
    padding: 12px 10px;
    line-height: 26px;
    background: rgba(0, 0, 0, 0.7);
  }
}

// 底部走马灯
.vsbContainer {
  background-color: #5e5e5e;
  overflow: hidden;
  position: relative;
  .left {
    float: left;
    top: 0px;
    width: 217px;
    height: 170px;
    left: 0px;
    background: url(../assets/ico6.png) no-repeat;

    .border {
      border: 2px solid #fff;
      display: inline-block;
      width: 118px;
      height: 122px;
      text-align: center;
      font-size: 30px;
      color: #ffffff;
      margin-top: 22px;
      margin-left: 21px;

      div {
        margin: 12px 0 0 0;
        line-height: 40px;
        font-weight: bold;
      }
    }
  }
  .carousel {
    position: absolute;
    left: 195px;
    top: 50%;
    transform: translateY(-50%);
    width: 980px;
    .prev,
    .next {
      width: 30px;
      height: 30px;
      position: absolute;
      background: url(../assets/btn3.png);
      z-index: 9999;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
    }
    .next {
      right: 0;
      background-position: 30px 0;
    }

    .hidden {
      overflow: hidden;
      width: 900px;
      margin: 16px auto;
      .scorll {
        width: 2160px;
        li {
          padding: 0 10px;
          width: 160px;
          float: left;

          img {
            width: 160px;
            height: 130px;
            border: 3px solid #fff;
            box-sizing: border-box;
          }
          img:hover {
            border: 3px solid $--theme-primary;
          }
        }
      }
    }
  }
}

// 中间栏目内容区域
.cleafix {
  padding-top: 50px;
  height: 448px;
  .wrapper {
    height: 100%;

    // 左侧
    .left {
      width: 300px;
      height: 100%;
      background-color: #fff;
      float: left;

      // 顶部 bar
      .topBar {
        height: 36px;
        background: url(../assets/ico2.png) no-repeat;
        background-size: auto;
        background-position-y: 50%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 36px;
        div {
          float: left;
          height: 100%;
          line-height: 36px;
          font-size: 20px;
        }
        .title {
          margin-left: 5px;
          span:nth-of-type(1) {
            color: $--theme-primary;
          }
        }
        .line {
          width: 116px;
          .lineOne {
            display: block;
            border-bottom: 1px solid #546b28;
            padding-top: 16px;
          }
          .lineTwo {
            display: block;
            padding-top: 5px;
            width: 88px;
            border-bottom: 1px solid #e2e2e2;
          }
        }
        .more {
          transition: color 0.5s;
          cursor: pointer;
        }
        .more:hover {
          color: $--theme-primary;
        }
      }

      // 文章区域
      .middle {
        height: 100%;

        section {
          padding-bottom: 19px;
          margin-bottom: 19px;
          border-bottom: 1px dotted #ccc;
          overflow: hidden;
          .date {
            color: #fff;
            width: 50px;
            text-align: center;
            margin-right: 12px;
            background: #f7f7f7;
            float: left;
            .mouth {
              height: 22px;
              background: $--theme-primary;
              font-size: 14px;
              line-height: 22px;
            }
            .day {
              height: 36px;
              line-height: 36px;
              font-size: 18px;
              color: #323232;
              border: 1px solid #ccc;
              border-top-color: rgb(204, 204, 204);
              border-top-style: solid;
              border-top-width: 1px;
              border-top: 0;
            }
          }
          .right {
            float: left;
            width: 228px;

            .title {
              font-family: "微软雅黑";
              color: #000;
              font-size: 16px;
              font-weight: bold;
              width: 100%;
              height: 32px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              transition: color 0.5s;
              cursor: pointer;
            }
            .title:hover {
              color: $--theme-primary;
              text-decoration: underline;
            }

            .context {
              height: 48px;
              overflow: hidden;
            }
          }
        }
      }
    }

    // 中间
    .center {
      float: left;
      width: 590px;
      background-color: #fff;
      padding: 0 15px;
      box-sizing: border-box;
      // 顶部bar
      .topBar {
        width: 100%;
        margin-bottom: 16px;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        height: 34px;
        line-height: 34px;
        .title {
          float: left;
          background: $--theme-primary;
          cursor: pointer;
          color: #fff;
          padding: 0 26px;

          border-bottom: 0px;
          border-left: 0;
          font-size: 18px;
          text-align: center;
          border: 1px solid #ccc;
        }

        .more {
          padding: 0 26px;
          transition: color 0.5s;
          cursor: pointer;
          float: right;

          span {
            padding: 0;
            line-height: 36px;
            font-size: 20px;
          }
        }
        .more:hover {
          color: $--theme-primary;
        }
      }
      // 文章区域

      .article {
        height: 397px;
        // 最新
        .new {
          list-style: none;
          overflow: hidden;
          padding-bottom: 20px;
          .picture {
            width: 258px;
            height: 188px;
            float: left;
            img {
              display: block;
              height: 100%;
              width: 100%;
            }
          }

          .right {
            width: 292px;
            margin-left: 10px;
            float: left;
            .title {
              width: 100%;
              font-size: 16px;
              color: #323232;
              font-weight: bold;
              line-height: 30px;
              display: block;
              padding-top: 9px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              cursor: pointer;
              transition: color 0.5s;
              font-weight: bold;
              font-family: "微软雅黑";
            }
            .title:hover {
              color: $--theme-primary;
              text-decoration: underline;
            }
            .context {
              overflow: hidden;
              height: 104px;
              font-size: 14px;
              text-indent: 2em;
              color: #787878;
              line-height: 26px;
              margin-top: 6px;
            }
            .date {
              text-align: left;
              color: #c9c9c9;
              font-size: 14px;
              margin-top: 12px;
            }
          }
        }

        // 过往文章
        .last {
          list-style: none;
          overflow: hidden;
          text-indent: 12px;
          line-height: 28px;
          .title {
            float: left;
            transition: color 0.5s;
            display: block;
            background: url(../assets/ico5.png) no-repeat left;
            padding-left: 12px;
            height: 28px;
            cursor: pointer;

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .title:hover {
            color: $--theme-primary;
            text-decoration: underline;
          }
          .date {
            float: right;
            display: block;
            color: #c8c8c8;
          }
        }
      }
    }

    // 右侧tab
    .right {
      float: left;
      width: 300px;
      margin-left: 10px;
      background-color: #fff;
      .tab {
        position: relative;
        .tabOne,
        .tabTwo {
          float: left;
          width: 50%;
          span {
            background: #fff;
            cursor: pointer;
            display: block;
            height: 34px;
            line-height: 34px;
            font-size: 18px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
          }
        }

        .tabShow {
          span {
            background: $--theme-primary;
            color: #fff;
          }
        }

        .tabTwo,
        .tabOne {
          ul {
            position: absolute;
            top: 34px;
            left: 0;
            width: 300px;
            background-color: #fff;

            overflow: hidden;
            text-indent: 12px;
            line-height: 28px;

            li {
              width: 100%;
              float: left;
              transition: color 0.5s;
              display: block;
              background: url(../assets/ico5.png) no-repeat left;
              padding-left: 12px;
              height: 28px;
              cursor: pointer;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              padding-bottom: 7.5px;
              margin-bottom: 8px;
              border-bottom: 1px dotted #ccc;
              font-size: 14px;
              line-height: 36.4px;
            }
            li:hover {
              color: $--theme-primary;
              text-decoration: underline;
            }
          }
        }

        .tabTwo ul {
          display: none;
        }

        .tabOne,
        .tabTwo:hover ul {
          display: block;
        }
      }
    }
  }
}
</style>